<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
</head>
<style>

</style>

<body>
  1.让一个不定宽高的div实现垂直水平居中
  <div class="two">wo </div>
  <div class="three">shi </div>
  <div class="four">xian </div>
  <div class="five">yu </div>
  </div>
  <style>
    .one {
      width: 100%;
      background: #f0f;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 200px;


    }
  </style>
  <hr>
  2. position 的几个属性
  <div class="root">
    <div class="staric"></div>
    <div class="relative"></div>
    <div class="absolute"></div>
    <div class="fixed"></div>
  </div>
  <hr>
  <style>
    .root {
      /* position: relative; */
      background: #e5df2e;
      z-index: 9999;
    }

    .staric {
      width: 100px;
      height: 100px;
      position: static;
      background: #000;
      /* 页面标准流默认值*/
    }

    .relative {
      width: 100px;
      height: 100px;
      position: relative;
      background: #9b1f1f;
      top: 10px;
      left: 10px;
      /* 原本位置还存在 可以设置偏移量 */
    }

    .absolute {
      width: 100px;
      height: 100px;
      position: absolute;
      background: #259b1f;
      /* top: 10px;
      left: 10px; */
      /* 原本位置不存在了 可以设置偏移量 已经漂浮在文档上了 */
    }

    .fixed {
      width: 100px;
      height: 100px;
      position: fixed;
      background: #1f709b;
      top: 10px;
      left: 20px;
      /* 脱离文档流 相对于body 元素不会随着页面的移动而移动 */
    }
  </style>
  3. px rem em 单位
  <div>
    <p>1. px是绝对单位 像素是相对于显示屏的分辨率而言 虚拟长度单位</p>
    <p>2. em是相对长度单位 当前的文本尺寸如果没有被设置 会继承父级的字体大小 不是一个固定的值</p>
    <p>3. rem是css3 中新增的相对单位(root em) 使用rem设置大小也是相对大小 但是相当于html根元素</p>
    <p>三者的区别: IE无法调整px作为单位的字体大小，而em和rem可以缩放，rem是相对html根元素 rem可以通过 修改html根元素的值来调整页面的字体大小 目前 IE8以下不支持rem 其他都支持</p>
  </div>
  <hr>
  4.什么是bfc
  <div class="item1 bfc">
    <div class="box "></div>
    <p class="bfc">对于bfc的理解:是一块独立渲染的区域与外界毫不相干,产生bfc的条件 float不为none，position为absolute或者fixed display为inline-block flex
      inline-flex overflow 不为 visible</p>
  </div>
  <style>
    .item1 {
      width: 100%;
      background: #ccc;
    }

    .item1 .box {
      width: 200px;
      height: 200px;
      background: #f03f04;
      float: left;

    }

    .bfc {
      overflow: hidden;
    }

    p {
      /* float: left; */
    }
  </style>
  <hr>
  5.页面导入link 和 @import的区别
  <p> 区别1 link先有 后有@import {兼容性link比较好}
    区别2 加载顺序有差别 浏览器先加载标签 link 后加载@import</p>
  <hr>
  6. 描述css reset的作用
  <p>用来清除默认样式 现已不用，浪费浏览器资源</p>
  <hr>
  7. 解释 css sprites，如何使用？
  <p>css精灵图 用来把小图片放到一张大图片上，来减轻浏览器的请求的负担</p>
  <hr>
  8、清除浮动的几种方式？
  <p>
    清除的浮动的方式 1. 在父元素后面加一个空的div 设置上 clear：both 2.给父级元素设置高度 3.父级元素设置overflow: hidden; 3.给父元素添加伪类content：""；
    display：block； visibility：hidden；height：0;line-height：0；clear：both； 如果相对ie浏览器的话 设置clearfix{zoom：1}
  </p>
  <hr>
  9. 能否简述一下如何使一套设计方案，适应不同的分辨率，有哪些方法可以实现？
  <div>
    <p>如果公司是要新构建一个网站的话，想要实现适配不同的分辨率，可以使用媒体查询也就是响应式布局 只不过这样的话代码量太大，通常使用bootcss 来进行构建，能适配任何终端 因为代码量大的原因可能加载较慢</p>
    <p>如果是一套老项目的话，推荐使用自适应布局 代码量较少 除了对pad的兼容性有点差以外，只能在移动端设备上可以使用。加载速度较快</p>
  </div>
  <hr>
  10.你能描述一下渐进增强和优雅降级之间的不同吗？
  <div>
    <p>渐进增强是 先针对低版本浏览器实现基础功能 ,再对高级浏览器实现各种交互效果 </p>
    <p>优雅降级是 先对于高版本浏览器实现各种交互效果 , 在逐步去对低版本浏览器实现降级保证页面构建和基本功能</p>
    <p>区别 优雅降级是从一个高版本慢慢减少对用户体验的供给 渐进增强是 从一个低版本开始慢慢扩充 以适应未来的环境需要 </p>
  </div>
  <hr>
  11. 合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么
  <div>
    <p>结构是html 表现是css</p>
  </div>
  <hr>
  12.简述对 Web 语义化的理解
  <div>
    <p>1.是可以让搜索引擎更好的来识别代码知道每一个部分是什么内容 能使代码简洁明了 2.也方便了下个人来读懂代码</p>
  </div>
  <hr>
  13.、CSS 都有哪些选择器？CSS 选择器的优先级是怎么样定义的、

  <div>
    <P>排序 !important> 行内>id>class> 标签 伪类 属性选择>伪对象> 基础 > *</P>
  </div>
  14. display： none；与 visibility： hidden 的区别是
  <div>
    <p>
      display:none 元素将会在消失在页面中
    </p>
    <p>
      visibility： hidden 元素只是会在页面进行隐藏 各种属性都还存在
    </p>
  </div>
  <hr>
  15、用 CSS 定义 p 标签，要求实现以下效果：字体颜色在 IE6 下为黑色(#000000)；IE7下为红色(#ff0000)；而其他浏览器下为绿色(#00ff00
  <span>文字</span>
  <style>
    span {
      color: green;
      *color: blue;
      /* ie7 样式*开头 */
      _color: black;
      /*ie6 样式*开头 */
    }
  </style>
  <hr>
  16.HTML 与 XHTML——二者有什么区别
  <div>
    <ul>
      <li>html是一种基本的web网页设计语言，xhtml是一个基于xml的置标语言</li>
      <li>不同 xhtml元素要被正确的嵌套</li>
      <li>xhtml元素必须有闭合标签</li>
      <li>标签名必须小写</li>
      <li>xhtml文档必须有根元素</li>
    </ul>
  </div>
  <hr>
  17.Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
  <div>
    <p>
      Doctype 用来告诉浏览器 当前的文件是什么类型的语言， 区分的意义 告诉浏览器用不同的引擎来解析文件
    </p>
  </div>
  <hr>
  18. 盒子模型
  <div>
    <p>
      css 盒子模型有哪些 标准盒子模型 ie盒子模型
      区别
      标准盒子模型 margin popping border content高度不包括border
      ie盒子模型 margin content(popping border) 高度包括border
    </p>
  </div>
  <hr>
  19.Css Hack？ie6,7,8 的 hack 分别是什么
  <div>
    <p>
      针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。
    </p>
  </div>
  <hr>
  20.请用 div+css 写出左侧固定(width:200px;),右侧自适应页面宽度.
  <div class="root1">
    <div class="left"></div>
    <div class="right">请用 div+css 写出左侧固定(width:200px;),右侧自适应页面宽度</div>
    <style>
      .root1 {
        width: 100%;
        border: 1px solid #f03f04;
        overflow: hidden;
      }

      .left {
        width: 200px;
        height: 200px;
        background: #000;
        float: left;
      }

      .right {
        float: left;
        overflow: hidden;
      }
    </style>
  </div>
  <hr>
  21.display：inline-block 什么时候会显示间隙？
  <div>
    <p>之前刚接触前端的时候我遇到过一次 就是当所有行内块聚集在1行时会出现间隙 解决的方式是给父级盒子设置font-size：0</p>
  </div>
  <hr>
  22.overflow有哪些值
  <div>
    <ul>
      <li>
        1.visible 默认值 内容不会被剪切 会呈现在元素框之外

      </li>
      <li>
        2. hidden 内容会被修剪 并且其余内容是不可见的
      </li>
      <li>
        3.scroll 内容会被修剪 其余内容通过滚动条来显示
      </li>
      <li>
        4.auto 内容会被修剪 其余内容通过滚动条来显示
      </li>
      <li>
        5. inherit 基础父节点的overflow的属性的值
      </li>
    </ul>
  </div>
  <hr>
  23. css 去掉 iPhone、iPad 默认按钮样式
  <div>
    <p>
      input[type="button"], input[type="submit"], input[type="reset"] {
      -webkit-appearance: none;
      }
      textarea { -webkit-appearance: none;}
      如果还有圆角的问题，
      .button{ border-radius: 0; }
    </p>
  </div>
  <hr>
  24.、CSS 样式初始化的目的
  <div>
    <p>
      css初始化 是为了浏览器的兼容做出的选择 同时也要保证页面在不同浏览器的页面显示一致 但是初始化会对 搜索引擎优化(seo) 有一定的影响 但是 为了用户体验 还是要选择初始化使对每个浏览器的显示一
    </p>
  </div>
  <hr>
  25.、用 div+css 布局的好处
  <div>
    <ul>
      <li>
        1.表现和内容分离
      </li>
      <li>
        2.提高搜索引擎对于网页的索引的效率 也就是说浏览器能更好的搜索到我的网页内容
      </li>
      <li>
        提高页面浏览速度 对于同一个页面视觉效果 采用css+div重构的页面容量较小
      </li>
      <li>
        易于后者去维护和改变 稍微修改几个css文件就可以对网页进行重构
      </li>
    </ul>
  </div>
  <hr>
  26、用表格 table 对 seo 的影响
  <div>
    像table一样用div+css，无穷尽的嵌套，其效果与table设计没有两样，并不会带来搜索引擎的优化效果，反而会增加页面的负担;
  </div>
  <hr>
  27.console 有哪些常用方法?（答出三种并说出它的用法即可，想考察你有没有工作经验
  <div>

    <ul>
      <li> console.log()</li>
      <li>
        console.info()方法用于在控制台输出信息
      </li>
      <li>
        console.error() 将错误信息输出到控制台
      </li>
      <li>
        console.time() 方法是计算器的起始方法，结束方法为 console.timeEnd() ，该方法执行后会将执行时长显示在控制台上。
      </li>
    </ul>
  </div>
  <hr>
  28.为什么利用多个域名来存储网站资源会更有效？
  <div>
    <ul>
      <li>1.cdn缓存更方便</li>
      <li>2. 突破浏览器并发限制</li>
      <li>3.节约 cookie 带宽</li>
      <li>4.节约主域名的连接数，优化页面响应速度</li>
      <li>
        5. 防止不必要的安全问题
      </li>
    </ul>
  </div>
  <hr>
  29. 重排重绘重构
  <div>
    <p>重排：重排是更明显的一种改变，可以理解为渲染树需要重新计算。下面是常见的触发重排的操作：
      1.DOM 元素的几何属性变化 2. DOM 树的结构变化 3. 获取某些属性 4. 此外，改变元素的一
      些样式，调整浏览器窗口大小等等也都将触发重排</p>
    <p>重绘 ：重绘是一个元素外观的改变所触发的浏览器行为，例如改变 visibility、outline、背景色等属性。
      浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定
      伴随重排</p>
    <p>重构：编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能</p>
  </div>
  <hr>
  30. rgba()和 opacity 的透明效果有什么不同
  <div>
    <p>raba()只能改变当前元素的透明度</p>
    <p>opacity会改变子元素的透明度</p>
  </div>
  <hr>
  31.Sass、LESS 是什么？大家为什么要使用他们
  <div>
    <p>
      Sass、LESS是预处理器 比如 sass：如变量，继承，运算， 函数.都是可以使用 也可以用来快速的进行多重继承 方便加快代码的开发 可以方便地屏蔽浏览器私有语法差异。
    </p>
  </div>
  <hr>
  32. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？样式之间的转换
  <div>
    <p>行内元素有 span a img input strong em </p>
    <p> 块级元素 div h1 p table ul ol </p>
    <p>空元素 hr br link meta </p>
    <p>display ： block display ： flex display ： inline-block</p>
  </div>
</body>

</html>
<style>

</style>
<script>
  console.time();
  for (i = 0; i < 100000; i++) {
    // 代码部分
  }
  console.timeEnd();

</script>